4.6 Positioning

Motivations
- Try User Profile again.
- We need to know positioning, overlapping, layout, centering, ...

Positioning
- Read all in CSS Layout - The position Property.
- In the 4^th example in the above link, what will happen if the outer div does not use the relative positioning?
- List the four positioning methods. How are they different?
  - Static - the normal flow of elements with the two display types, block and inline, and the box model
  - Relative - relative to normal position
  - Fixed - relative to the viewport, which means it always stays in the same place even if the page is scrolled.
  - Absolute - relative to the nearest positioned (anything but static) ancestor; otherwise viewport
- Here is another example.
```
<p>
    Positioning
</p>

<div style='width:400px; height:200px; border:5px solid Black;'>
    <div style='width:200px; height:200px; border:5px solid Blue;'></div>
    <div style='width:200px; height:200px; border:5px solid Green;'>
        <p style='width:100px; text-align:center; border:5px solid Purple;'>
            Hmmmmm
        </p>
        <p style='width:100px; text-align:center; border:5px solid Red;'> 
            Interesting!
        </p>
    </div> 
</div>
```
```
<p>
    Positioning
</p>

<div style='position:relative; top:-50px; left:50px; width:400px; height:200px; border:5px solid Black;'>
    <div style='position:absolute; top:50px; right: -50px; width:200px; height:200px; border:5px solid Blue;'></div>
    <div style='position:relative; top:100px; right: -100px; width:200px; height:200px; border:5px solid Green;'>
        <p style='position:absolute; top:100px; left:100px; margin:0px; width:100px; text-align:center; border:5px solid Purple;'>
            Hmmmmm
        </p>
        <p style='position:relative; left:50px; top:50px; margin:0px; width:100px; text-align:center; border:5px solid Red;'> 
            Interesting!
        </p>
    </div> 
</div>
```
  Can you draw the above boxes yourself? Click here to see how the above code is displayed.
  Positioning
  
  Hmmmmm
  
  Interesting!
- Trial 1: Try yourselve the above example.
- Trial 2: Let's try to display a box at the exact center within another box.
  <style> ???tr2-outer-box { background-color:LightGreen; width:200px; height:200px; } ???tr2-inner-box { position: ???; top:???; left:???; background-color:LightBlue; width:100px; height:100px; } </style> <div id='tr2-outer-box'></div> <div id='tr2-inner-box'></div>
- Trial 3: Let's try to display a box at the exact center within another box.
  <???> ???tr3-outer-box { position:???; background-color:LightGreen; width:200px; height:200px; } ???tr3-inner-box { position: ???; top:???; left:???; background-color:LightBlue; width:100px; height:100px; } </style> <div id='tr3-outer-box'> <div ???='tr3-inner-box'></div> </div>
- An example of drop-down menu. This example uses positioning. We will study drop-down menu in detail later.
  - - COMP2680
    - COMP3540
    - COMP3710
- Here is another example.
  Live Chat
  (Press the button and hold it to see :active!)
  What type of positioning do you think is used in this example?
- Trial 4: Let's try to display a box at the top and right corner of the window. This box should be displayed at the corner even when the window shrinks or expands.
  <style> ??? { position:???; ???; ???; background-color:LightBlue; border:??? ??? ???; width:100px; height:50px; text-align:center; } </style> <div id='tr4-box'> Amazing web technologies! </div>
Centering
- Text alignment
  - Read all in CSS text-align Property.
  - Types of text alignment? Left, center, right, justify
  - In which area is text aligned? Content area
  - Trial 5: Let's try to display text aligned at the center. Let's try this with <p> and <button>.
    <style> ???tr5-example-p { background-color:LightBlue; border:1px solid black; width:400px; height:100px; ???:???; } ???tr5-example-button { background-color:LightGreen; border:1px solid black; width:200px; height:100px; ???:???; cursor:pointer; } </style> <p id='tr5-example-p'> Amazing web technologies! </p> <button id='tr5-example-button'>Click me!</button>
- How to position an element at the horizontal center of the outer dimension?
  - Read all in CSS Margin.
    - What does margin do?
    - What does the 'auto' value do?
    - 'auto' works only for block elements with relative and static positioning. Do you remember how to change an inline element to block type?
    - Try this example.
  - Trial 6: Here is an example. Try this example yourself.
```
<style>
    p { background-color: LightYellow; }
    p.tr6-left { width: 70%; ???-right: auto; }
    p.tr6-right { width: 70%; ???-left: ???; }
    p.tr6-hcenter { width: 50%; ???: ???; }
    p.tr6-just { margin-top: 100px; margin-bottom: 50px; margin-left: 100px; margin-right: 50px; }
    p.tr6-inside { width: 60%; ???: ???; }
</style>
<p>This course is a lot of fun. This course is a lot of fun. This course is a lot of fun. This course is a lot of fun.</p>
<p class='tr6-left'>This course is a lot of fun. This course is a lot of fun. This course is a lot of fun. This course is a lot of fun.</p>
<p class='tr6-right'>This course is a lot of fun. This course is a lot of fun. This course is a lot of fun. This course is a lot of fun.</p>
<p class='tr6-hcenter'>Horizontal centering</p>
<p class='tr6-just'>This course is a lot of fun. This course is a lot of fun. This course is a lot of fun. This course is a lot of fun.</p>
<div style='width:50%; height:100px; border: 1px solid black;'>
    <p class='tr6-inside'>Horizontal centering</p>
</div>
```
    Can you imagine how the above paragraphs will be displayed?
  - In Trial 6, how to display texts in <p> elements at the center?
  - Trial 7: Let's try the horizontal centering with 'margin:auto'.
    <div ???='width:400px; height:100px; ???:1px solid blue;'> <p ???='width:200px; background-color:grey; ???'>Horizontal centering with margin:auto</p> </div>
  - Now you know how to do the horizontal centering for relative or static positioned elements. How to do the horizontal centering for 'fixed' and 'absolute' positioned elements? E.g., the link at the bottom. Do you remember that 'margin:auto' does not work with 'absolute' and 'fixed' positioned elements.
    - You need to calculate the correct position, using 'calc(), vw, vh', where vw is for viewport width and vh is for viewport height. The values that you can use are 0 - 100. E.g., calc(50vw - 55px).
    - You may read CSS calc() Function.
    - E.g., the horizontal center with fixed positioning
```
<p style='???:???; bottom:20px; left:calc(???); 
  background-color:LightGrey; width:150px; text-align:center; z-index:1; font-size:200%'>
    <a ???='//cs.tru.ca'>cs.tru.ca
</p>
```
    - Trial 8: Let's try the above code.
- How to position an element at the vertical center of the outer dimension?
  - Can you use 'margin-top' and 'margin-bottom'? Unfortunately NO. Then?
  - You can use 'table-cell' display type with 'vertical-align: middle' CSS property. Here is an example.
```
<style>
    div.tr9-outside { ???:???; ???:???; width:400px; height:300px; border:1px solid blue; }
</style>
<p>Vertical centering. This course is a lot of fun. This course is a lot of fun. This course is a lot of fun. This course is a lot of fun.</p>
<div class='tr9-outside'>
    <p style='text-align:center; width:60%; ???:???; background-color:LightGreen;'>
        (Note that the height is not specified, which means not easy to use calc().) 
        This course is a lot of fun. This course is a lot of fun. This course is a lot of fun.</p>
</div>
```
  - Trial 9: Let's try the above example. Can you add the horizontal centering too?
  - Try to complete this exercise program that displays the direction to mouse pointer.
Overlapping
- When HTML elements are positioned, which element should be displayed first?
- Read 'Overlapping Elements' in CSS Layout - The position Property.
- Note: Any positioned elements will be displayed over non-positioned elements, i.e., static position.
- Warning: 'z-index' works only with poisitioned elements with relative, fixed, and absolute.
- Warning: 'z-index' is inherited to descendants no matter what value is specifed in the descendants. (It seems to be stranage though.)
- Trial 10: Let's try to display 'HTML5' over 'html5.png'.
  <??? ???='??? background-color:LightYellow;'>HTML5</span> <??? ???='html5.png' style='position:relative;'></img>
- Can you make a modal window? E.g.,
How to design a web page - Page layout?
- Here is an example of page layout.
  
  Title
  
  Navigation
  
  Content
  
  Footer
- Trial 11: Let's try to make the above layout.
  <div style='position:relative; border:2px solid Blue; width:400px; height:400px;'> <div style='position:absolute; top:0; left:0; width:100%; height:50px; background-color:LightBlue'> Title </div> <div style='position:???; top:???; left:0; width:100px; height:calc(???); background-color:LightGreen'> Navigation </div> <div style='???:absolute; top:???; left:???; width:???; height:???; background-color:LightYellow;'> Content </div> <div style='position:???; bottom:0px; left:???; width:???; height:25px; background-color:LightGrey;'> Footer </div> </div>
How to move an element - animation effect?
- Here is an example.
- By setting new position of the element. How to set a new position?
- You may need to repeatedly redisplay the element to give an animation effect. How? You need to use JavaScript. We will discuss JavaScript late.

Learning outcomes